<template>
  <div class="menu-bar">
    <transition
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <div
        class="menu-wrapper"
        :class="{'hide-box-shadow': !menuVisible || settingVisible >= 0}"
        v-show="menuVisible"
      >
        <div class="icon-wrapper">
          <span class="iconfont" @click="showSetting(3)">&#xe667;</span>
          <span class="iconfont" @click="showSetting(2)">&#xe60f;</span>
          <span class="iconfont" @click="showSetting(1)">&#xe65f;</span>
          <span class="iconfont" @click="showSetting(0)">&#xe60a;</span>
        </div>
      </div>
    </transition>
    <ebook-setting-font></ebook-setting-font>
    <ebook-setting-font-popup></ebook-setting-font-popup>
    <ebook-setting-theme></ebook-setting-theme>
    <ebook-setting-progress></ebook-setting-progress>
    <ebook-slide></ebook-slide>
  </div>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import EbookSettingFont from './EbookSettingFont'
import EbookSettingFontPopup from './EbookSettingFontPopup'
import EbookSettingTheme from './EbookSettingTheme'
import EbookSettingProgress from './EbookSettingProgress'
import EbookSlide from './EbookSlide'
export default {
  name: 'EbookMenu',
  components: {
    EbookSlide,
    EbookSettingProgress,
    EbookSettingTheme,
    EbookSettingFontPopup,
    EbookSettingFont
  },
  mixins: [ebookMixin],
  methods: {
    showSetting (index) {
      this.setSettingVisible(index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .menu-bar
    .menu-wrapper
      position: absolute
      bottom: 0
      left: 0
      z-index: 102
      display: flex
      width: 100%
      height: px2rem(48)
      line-height: px2rem(48)
      background: white
      box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15)
      .icon-wrapper
        flex: 1
        center()
        .iconfont
          font-size: px2rem(22)
          width: 25%
          center()
  .hide-box-shadow
    box-shadow: none !important
</style>
